<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_ref</title>
</head>

<body>

    <div id="test" />
    <script type="text/javascript"
        src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script type="text/javascript"
        src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script type="text/javascript"
        src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        // 字符串的ref ,定义ref的属性即可(过时API)
        // React.createRef()
        // 回调函数的ref, ref在react中会自动帮忙调用,,把所处的节点挂到了实例身上, 调用次数
        class Demo extends React.Component{
            // 展示左侧输入框是数据
            showData = ()=>{
                console.log('@', this)
                console.log(this.refs.input1.value)
                const {input1} = this.refs
                alert(input1.value)
            }

            showData2 = () => {
                // 从自身实例上取
                const {input2} = this
                alert(input2.value)
            }

            render(){
                return (
                    <div>
                        {/** 把接收的参数c放在了组件实例上,, 在组件实例中
                           c 当前多处的节点给你传递过去, 把c这个节点放在了组件实例的自身上,起来一个名字叫input1, this指的是 render的组件实例上
                           把ref当前所处的节点input,挂在了组件实例上,并取了一个名字叫input1,, c代表形参
                           
                           箭头函数左边只有一个参数,小括号可以省略
                           箭头函数右侧只有一句函数体,花括号可以省略,,  ref={ c=> this.input1 = c}

                           
                        */}
                        <input ref={(c)=>{this.input1 = c}} type="text" placeholder="点击按钮提示数据"/>
                        <button onClick={this.showData}>点击提示左侧的数据</button>
                         {/** 回调函数,react帮你调用 */}
                        <input ref={ c=>this.input2 = c } onBlur={this.showData2} type="text"  placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo a="1"/>, document.getElementById("test"))
    </script>
</body>

</body>

</html>